@charset "UTF-8";
html {
    font:14px/1.5 "Hiragino Sans GB","Microsoft Yahei",Arial,sans-serif
}
body {
    margin:0 auto;
    position:relative;
    background-color:#fff;
    max-width:1200px;
    color:#333
}
body.lock {
    overflow:hidden
}
body.loading * {
    cursor:progress!important
}
body:not([login]) .for-user,body:not([login]) .for-visitor {
    display:none!important
}
body[login=true] .for-visitor {
    display:none!important
}
body[login=false] .for-user {
    display:none!important
}
body:not([role=EDITOR]) .for-editor {
    display:none!important
}
body[role=EDITOR] .not-for-editor {
    display:none!important
}
h1,h2 {
    display:inline-block;
    margin:0
}
h1 {
    font-size:1.8em
}
h2 {
    font-size:1.2em
}
a:not(.blue) {
    text-decoration:none;
    color:inherit
}
ul {
    list-style-type:none;
    padding-left:10px
}
hr {
    border:1px solid #aaa;
    border-bottom:none
}
input,textarea {
    -webkit-appearance:none;
    -webkit-border-radius:0;
    outline:0
}
input[type=text] {
    margin:0;
    height:36px;
    padding:7px 10px 5px;
    box-sizing:border-box;
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
input[type=text]:focus {
    background-color:rgba(255,255,255,.8)
}
input[type=search],input[type=text],textarea {
    border:none;
    font-family:Courier,"Microsoft Yahei","Hiragino Sans GB",monospace;
    font-size:1em
}
button {
    cursor:pointer;
    outline:0
}
.hide,[hide] {
    display:none!important
}
.yoopu2-icon.animate-spin {
    -webkit-animation:spin 2s infinite linear;
    -moz-animation:spin 2s infinite linear;
    -ms-animation:spin 2s infinite linear;
    -o-animation:spin 2s infinite linear;
    animation:spin 2s infinite linear;
    display:inline-block
}
@keyframes spin {
    0% {
        -webkit-transform:rotate(0);
        -moz-transform:rotate(0);
        -ms-transform:rotate(0);
        -o-transform:rotate(0);
        transform:rotate(0)
    }
    100% {
        -webkit-transform:rotate(359deg);
        -moz-transform:rotate(359deg);
        -ms-transform:rotate(359deg);
        -o-transform:rotate(359deg);
        transform:rotate(359deg)
    }
}@media screen and (max-width:768px) {
    body {
        -webkit-tap-highlight-color:transparent;
        -webkit-touch-callout:none;
        -webkit-user-select:none
    }
}hexi-sheet {
     font-family:arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
     font-size:1em;
     position:relative;
     visibility:hidden;
     overflow-x:hidden;
     padding:35px 60px 30px;
     display:block;
     background-color:#fff
 }
hexi-sheet[ready] {
    visibility:visible
}
hexi-sheet[instrument=guitar] hexi-rhythm[string-num="4"],hexi-sheet[instrument=guitar] hexi-tab[string-num="4"],hexi-sheet[instrument=ukulele] hexi-rhythm[string-num="6"],hexi-sheet[instrument=ukulele] hexi-tab[string-num="6"] {
    display:none
}
hexi-sheet[finger-style][instrument] hexi-tab[string-num] {
    display:initial
}
hexi-chord {
    display:inline-block
}
.hexi-header {
    box-sizing:border-box;
    max-width:70%;
    margin-bottom:20px
}
.hexi-header .hexi-title {
    padding-top:10px;
    position:relative;
    margin-bottom:10px;
    font-weight:400;
    font-size:1.5em;
    letter-spacing:1px
}
.hexi-header .hexi-subtitle {
    font-weight:400;
    font-size:1em;
    color:#666;
    max-width:70%
}
.hexi-header .hexi-subtitle span {
    display:inline-block;
    margin-right:5px
}
.hexi-header .hexi-subtitle span em {
    font-style:normal;
    font-size:.8em;
    color:#6bbbff
}
.hexi-comment {
    border-left:solid 3px #bbb;
    color:#777;
    line-height:1;
    padding:.3em 0 .3em 17px;
    font-size:.9em;
    margin:10px 0
}
.hexi-chorus {
    border-left:solid 3px #ccc;
    margin:1em 0
}
.hexi-chordline {
    margin-left:20px
}
.hexi-chordline span.hexi-chord {
    color:#6bbbff;
    font-size:.9em;
    margin-right:20px;
    position:static
}
.hexi-chordline hexi-chord {
    position:static!important
}
.hexi-textline {
    color:#333;
    font-family:inherit;
    white-space:pre-wrap;
    letter-spacing:1px;
    padding-left:20px
}
.hexi-chord {
    width: max-content;
    font-family:Arial,sans-serif;
    position:absolute;
    top:-1.1em;
    color:#6bbbff;
    font-size:.9em;
    letter-spacing:0
}
.hexi-chord .hexi-chord-sharp {
    position:relative;
    top:-3px
}
.hexi-chord .hexi-chord-sharp.roboto {
    font-family:Roboto,sans-serif;
    font-size:.8em;
    left:-3px;
    margin-right:-5px
}
.hexi-chord .hexi-chord-sharp.arial {
    font-family:"Arial Unicode MS",sans-serif;
    font-size:.9em;
    left:-1px;
    margin-right:-1px
}
.hexi-chord .hexi-chord-flat {
    position:relative;
    top:1px
}
.hexi-chord .hexi-chord-flat.roboto {
    font-family:Roboto,sans-serif;
    font-size:.8em;
    left:-3px;
    margin-right:-5px
}
.hexi-chord .hexi-chord-flat.arial {
    font-family:"Arial Unicode MS",sans-serif;
    font-size:.9em;
    left:-1px;
    margin-right:-1px
}
.hexi-chord-anchor {
    line-height:1em;
    border-bottom:1px solid;
    display:inline-block;
    padding:1px 0;
    position:relative
}
.hexi-meta {
    position:absolute;
    top:35px;
    right:60px;
    list-style:none;
    margin:15px 0;
    max-width:30%
}
.hexi-meta li:first-child {
    border-top-width:1px
}
.hexi-meta li {
    padding:0 15px;
    font-size:.8em;
    line-height:1.2em;
    border:1px solid #aaa;
    border-top-width:0;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden
}
.hexi-line {
    color:#333;
    font-family:inherit;
    white-space:pre-wrap;
    line-height:4;
    margin:0;
    letter-spacing:1px;
    padding-left:20px
}
.hexi-chorus .hexi-line {
    padding-left:17px
}
hexi-rhythm,hexi-tab {
    overflow-x:scroll;
    display:block;
    -ms-overflow-style:-ms-autohiding-scrollbar
}
hexi-rhythm::-webkit-scrollbar,hexi-tab::-webkit-scrollbar {
    display:none
}
@supports (-ms-ime-align:auto) {
    hexi-rhythm,hexi-tab {
        overflow-x:hidden
    }
}hexi-sheet[inline-chords] .hexi-comment+.hexi-line,hexi-sheet[inline-chords] hexi-rhythm+.hexi-line,hexi-sheet[inline-chords] hexi-tab+.hexi-line {
     margin-top:30px
 }
hexi-sheet[inline-chords] .hexi-comment+.hexi-chorus,hexi-sheet[inline-chords] hexi-rhythm+.hexi-chorus,hexi-sheet[inline-chords] hexi-tab+.hexi-chorus {
    padding-top:20px
}
hexi-sheet[inline-chords] hexi-chord {
    position:absolute;
    top:-3em;
    left:-.66em
}
hexi-sheet[inline-chords] .hexi-line {
    line-height:5.5
}
hexi-sheet[instrument=ukulele][inline-chords] .hexi-chord-anchor+.hexi-chord-anchor {
    margin-left:10px
}
hexi-sheet[instrument=guitar][inline-chords] .hexi-chord-anchor+.hexi-chord-anchor {
    margin-left:20px
}
hexi-sheet[instrument=guitar][inline-chords] hexi-chord {
    position:absolute;
    top:-3.2em;
    left:-1.1em
}
hexi-sheet[instrument=guitar][inline-chords] .hexi-line {
    letter-spacing:2px
}
[line-num].focal {
    background-color:#f5f5f5
}
@media screen and (max-width:768px) {
    hexi-sheet {
        padding:10px
    }
    .hexi-meta {
        top:10px;
        right:10px
    }
}hexi-sheet.mobi {
     padding:10px 10px 20px 10px
 }
hexi-sheet.mobi .hexi-meta {
    top:10px;
    right:10px
}
yp-slider-play {
    height:200px
}
yp-slider-play .bar {
    position:relative;
    padding:0 20px;
    height:100%;
    width:10px;
    display:inline-block;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer
}
yp-slider-play .barBg,yp-slider-play .barFg {
    border-radius:5px;
    position:absolute;
    background-color:#f6f5f1;
    opacity:.7;
    width:10px;
    height:100%;
    bottom:0;
    margin:0 20px
}
yp-slider-play .barFg {
    opacity:.5
}
yp-slider-play .play {
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:40px;
    opacity:.7;
    position:absolute;
    top:0;
    right:5px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent
}
yp-slider-play .play:after {
    content:"";
    position:absolute;
    border:12px transparent solid;
    border-left-color:#fff;
    left:20px;
    top:8px;
    -webkit-transform:scale(1.5,1);
    -moz-transform:scale(1.5,1);
    -ms-transform:scale(1.5,1);
    -o-transform:scale(1.5,1);
    transform:scale(1.5,1)
}
yp-slider-play .speedDisplay {
    position:fixed;
    width:140px;
    height:80px;
    font-size:2em;
    top:50%;
    left:50%;
    margin-left:-70px;
    margin-top:-40px;
    background-color:rgba(100,100,100,.5);
    border-radius:10px;
    text-align:center;
    line-height:80px;
    opacity:0;
    transition:all,2s
}
yp-slider-play .speedDisplay.show {
    transition:all,0s;
    opacity:1
}
yp-slider-play.on .play:after {
    border:none;
    width:16px;
    height:16px;
    background-color:#fff;
    left:12px;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -ms-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
    top:12px
}
yp-slider-play.on .play {
    opacity:.3
}
yp-slider-play.on .barBg,yp-slider-play.on .barFg {
    opacity:0
}
yp-number-stepper button {
    color:#6bbbff;
    border:1px solid #6bbbff;
    height:30px;
    font-size:14px;
    padding:0 30px 0 20px;
    outline:0;
    background-color:#fff;
    cursor:pointer;
    position:relative;
    margin:0;
    -webkit-transition:all,.2s;
    -moz-transition:all,.2s;
    -o-transition:all,.2s;
    transition:all,.2s
}
yp-number-stepper button:active {
    background-color:rgba(205,92,92,.5);
    opacity:.9
}
yp-number-stepper button:disabled {
    cursor:not-allowed;
    background-color:#f3f3f3;
    border-color:#ccc
}
yp-number-stepper button:disabled:after,yp-number-stepper button:disabled:before {
    background-color:#ccc
}
yp-number-stepper .incrButton {
    border-radius:0 5px 5px 0
}
yp-number-stepper .incrButton:disabled {
    border-left-color:#6bbbff
}
yp-number-stepper .decrButton {
    border-radius:5px 0 0 5px;
    border-right-width:0
}
yp-number-stepper .decrButton:after,yp-number-stepper .incrButton:after {
    content:"";
    width:11px;
    height:3px;
    background-color:#6bbbff;
    position:absolute;
    top:13px;
    left:20px
}
yp-number-stepper .incrButton:before {
    content:"";
    width:3px;
    height:11px;
    background-color:#6bbbff;
    position:absolute;
    top:9px;
    left:24px
}
yp-number-stepper[disabled] .decrButton,yp-number-stepper[disabled] .incrButton {
    background-color:#f3f3f3;
    border-color:#ccc
}
yp-number-stepper[disabled] .decrButton:after,yp-number-stepper[disabled] .incrButton:after,yp-number-stepper[disabled] .incrButton:before {
    background-color:#ccc
}
yp-number-stepper[disabled] button {
    border:1px solid #ccc
}
yp-number-stepper[disabled] .decrButton:after,yp-number-stepper[disabled] .incrButton:after,yp-number-stepper[disabled] .incrButton:before {
    cursor:not-allowed;
    background-color:#ccc
}
yp-switcher input[type=checkbox].ios8-switch {
    position:absolute;
    margin:8px 0 0 16px;
    display:none
}
yp-switcher input[type=checkbox].ios8-switch+label {
    position:relative;
    padding:4px 20px;
    line-height:32px
}
yp-switcher input[type=checkbox].ios8-switch:disabled+label:before {
    background-color:#f3f3f3;
    cursor:not-allowed
}
yp-switcher input[type=checkbox].ios8-switch+label:before {
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:3px;
    width:36px;
    height:18px;
    border-radius:16px;
    background-color:#aaa;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s;
    cursor:pointer
}
yp-switcher input[type=checkbox].ios8-switch:disabled+label:after {
    background-color:#f3f3f3;
    cursor:not-allowed
}
yp-switcher input[type=checkbox].ios8-switch+label:after {
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:0;
    width:24px;
    height:24px;
    border-radius:16px;
    background-color:#f0f0f0;
    -webkit-transition:background-color .3s,left .3s,opacity .3s;
    -moz-transition:background-color .3s,left .3s,opacity .3s;
    -o-transition:background-color .3s,left .3s,opacity .3s;
    transition:background-color .3s,left .3s,opacity .3s;
    cursor:pointer;
    box-shadow:0 0 5px rgba(0,0,0,.3)
}
yp-switcher input[type=checkbox].ios8-switch:checked+label:after {
    left:12px;
    background-color:#6bbbff
}
yp-switcher input[type=checkbox].ios8-switch:checked+label:before {
    background-color:#f1acac
}
yp-switcher input[type=checkbox].ios8-switch:active+label:after {
    box-shadow:0 0 15px 5px #999
}
yp-switcher[side-selection] input[type=checkbox].ios8-switch:checked+label:before {
    background-color:#999;
    opacity:1
}
yp-switcher[disabled] input[type=checkbox].ios8-switch:checked+label:before {
    background-color:#f0f0f0!important;
    cursor:not-allowed
}
yp-switcher[disabled] input[type=checkbox].ios8-switch+label:after {
    background-color:#f0f0f0!important;
    cursor:not-allowed
}
@media screen and (min-width:769px) {
    #yp-toast,#yp-toast-slide {
        position:fixed;
        bottom:-48px;
        height:48px;
        text-align:center;
        background-color:#88d1d6;
        color:#fff;
        transition:transform .5s;
        width:100%;
        line-height:48px;
        opacity:.9;
        letter-spacing:1px;
        font-size:15px
    }
    #yp-toast a,#yp-toast-slide a {
        text-decoration:underline
    }
    #yp-toast-slide[level=error],#yp-toast[level=error] {
        background-color:#6bbbff
    }
    #yp-toast-slide[level=warn],#yp-toast[level=warn] {
        background-color:khaki
    }
    #yp-toast-slide.show,#yp-toast.show {
        -webkit-transform:translateY(-48px);
        -moz-transform:translateY(-48px);
        -ms-transform:translateY(-48px);
        -o-transform:translateY(-48px);
        transform:translateY(-48px)
    }
}@media screen and (max-width:768px) {
    #yp-toast {
        position:fixed;
        bottom:100px;
        opacity:0;
        transition:opacity .5s;
        width:100%;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center
    }
    #yp-toast div {
        padding:15px 30px;
        font-size:15px;
        background-color:rgba(200,200,200,.9);
        border-radius:30px
    }
    #yp-toast.show {
        opacity:1
    }
    #yp-toast-slide {
        position:fixed;
        right:-100%;
        top:80px;
        transition:right .5s;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center
    }
    #yp-toast-slide div {
        padding:5px 15px;
        font-size:15px;
        background-color:rgba(200,200,200,.9);
        border-radius:30px 0 0 30px
    }
    #yp-toast-slide.show {
        right:0
    }
}yp-modal-dialog {
     display:none
 }
yp-modal-dialog button {
    font-size:1em;
    height:30px;
    letter-spacing:2px;
    border:none
}
yp-modal-dialog button[ok] {
    background-color:#6bbbff;
    color:#fff;
    border-radius:15px;
    width:120px
}
yp-modal-dialog button[cancel] {
    background-color:#fff;
    width:100px
}
yp-modal-dialog button[ok]:disabled {
    background-color:#eee;
    color:#333;
    cursor:default
}
yp-modal-dialog[no-cancel] button[cancel] {
    display:none
}
yp-modal-dialog[opened] {
    display:block
}
yp-modal-dialog[opened] div[wrapper] {
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:calc(100% - 40px);
    min-height:260px;
    max-width:400px;
    background:#fff;
    border-radius:10px;
    padding:20px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    transform-origin:0 0;
    z-index:100;
    -webkit-animation:transformer .1s ease-in;
    -moz-animation:transformer .1s ease-in;
    -ms-animation:transformer .1s ease-in;
    -o-animation:transformer .1s ease-in;
    animation:transformer .1s ease-in
}
@keyframes transformer {
    from {
        transform:scale(.6) translate(-50%,-50%)
    }
    to {
        transform:scale(1) translate(-50%,-50%)
    }
}yp-modal-dialog[opened] div[wrapper] .bottom {
     margin:20px 20px
 }
yp-modal-dialog[opened] div[wrapper] a[title],yp-modal-dialog[opened] div[wrapper] div[title] {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    font-size:1.1em;
    border-bottom:1px solid #e8e8e8;
    padding:0 5px 15px 10px;
    margin-bottom:15px;
    font-weight:700
}
yp-modal-dialog[opened] div[wrapper] div[description] {
    padding:0 0 10px 10px;
    font-size:1.1em
}
yp-modal-dialog[opened] div[wrapper] ul {
    margin:0;
    list-style-type:none;
    padding-left:0
}
yp-modal-dialog[opened] div[wrapper] ul li a {
    letter-spacing:1px;
    padding:15px 10px;
    display:block;
    font-size:1.1em;
    transition:background-color .3s
}
yp-modal-dialog[opened] div[wrapper] ul li a:active {
    background-color:#f8f8f8
}
yp-modal-dialog[opened] div[wrapper] ul li {
    position:relative
}
yp-modal-dialog[opened] div[wrapper] ul li.for-editor:after {
    content:'需编辑员权限';
    position:absolute;
    right:0;
    top:0;
    line-height:53px;
    font-size:.8em
}
yp-modal-dialog[opened] div[content] {
    flex:1
}
yp-modal-dialog[opened] div[content] a.blue {
    color:#00f;
    text-decoration:underline
}
yp-modal-dialog[opened] div[content] input[type=number],yp-modal-dialog[opened] div[content] input[type=text],yp-modal-dialog[opened] div[content] textarea {
    width:100%;
    position:relative;
    border:1px solid #ccc;
    border-radius:5px;
    height:36px;
    font-size:1.2em;
    padding:0 10px 0 20px;
    box-sizing:border-box
}
yp-modal-dialog[opened] div[content] textarea {
    height:auto
}
yp-modal-dialog[opened] div[glass] {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:fixed;
    background-color:#333;
    opacity:.5;
    z-index:99
}
yp-modal-dialog[opened][position=bottom] div[wrapper] {
    top:initial;
    bottom:0;
    left:0;
    right:0;
    min-height:200px;
    background:#fff;
    padding:30px 20px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    z-index:100;
    transform:none;
    width:100%;
    border-radius:0;
    max-width:initial;
    -webkit-animation:animateOpen .1s linear;
    -moz-animation:animateOpen .1s linear;
    -ms-animation:animateOpen .1s linear;
    -o-animation:animateOpen .1s linear;
    animation:animateOpen .1s linear
}
yp-modal-dialog[opened][position=bottom] .top {
    display:none
}
yp-modal-dialog[opened][position=bottom]:not([cancel-button]) .bottom {
    display:none
}
@keyframes animateOpen {
    0% {
        bottom:-200px;
        opacity:.7
    }
    100% {
        bottom:0;
        opacity:1
    }
}@font-face {
    font-family:yoopu2;
    src:url(//cdn.yoopu.me/font/yoopu2.10c7b337.eot);
    src:url(//cdn.yoopu.me/font/yoopu2.10c7b337.eot#iefix) format("embedded-opentype"),url(//cdn.yoopu.me/font/yoopu2.3c3e42ec.woff) format("woff"),url(//cdn.yoopu.me/font/yoopu2.530a2ac1.ttf) format("truetype"),url(//cdn.yoopu.me/font/yoopu2.1b0a3053.svg#yoopu) format("svg");
    font-weight:400;
    font-style:normal
}
.yoopu2-icon {
    font-family:yoopu2;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.yp-loader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:2px;
    overflow:hidden;
    background-color:#f4f3ee;
    display:none;
    z-index:2
}
.yp-loader .yp-mover {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background-color:#6bbbff
}
@keyframes loader-moving {
    0% {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%)
    }
    100% {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -ms-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%)
    }
}body.loading .yp-loader {
     display:block
 }
body.loading .yp-mover {
    -webkit-animation:loader-moving 4s ease infinite;
    -moz-animation:loader-moving 4s ease infinite;
    -ms-animation:loader-moving 4s ease infinite;
    -o-animation:loader-moving 4s ease infinite;
    animation:loader-moving 4s ease infinite
}
@media screen and (max-width:768px) {
    .yp-loader {
        top:auto;
        bottom:0
    }
}#GlobalNavBar {
     background-color:#fff;
     height:52px;
     display:-webkit-flex;
     display:flex;
     -webkit-align-items:center;
     align-items:center;
     max-width:1200px;
     min-width:800px;
     z-index:1;
     margin:0 auto
 }
#GlobalNavBar .logo {
    background:url(//cdn.yoopu.me/img/logo.f8589ac9.png) center;
    background-size:40px;
    height:40px;
    display:inline-block;
    margin:7px 20px 7px 10px;
    width:40px
}
#GlobalNavBar .searchContainer {
    display:inline-block;
    position:relative;
    margin-left:20px
}
#GlobalNavBar input {
    height:36px;
    padding:5px 15px;
    font-size:.9em;
    width:120px;
    box-sizing:border-box;
    border-radius:18px;
    background-color:#f4f3ee;
    border:none;
    outline:0;
    transition:all,.3s
}
#GlobalNavBar input[type=search]::-webkit-search-cancel-button {
    display:none
}
#GlobalNavBar input:focus {
    width:200px
}
#GlobalNavBar .searchContainer a {
    position:absolute;
    right:10px;
    top:0;
    line-height:36px;
    width:36px;
    text-align:right;
    color:#999
}
#GlobalNavBar a.link {
    color:#999;
    font-size:16px;
    transition:all,.3s;
    line-height:48px;
    padding:0 15px;
    border-top:4px solid #fff
}
#GlobalNavBar a.link.selected,#GlobalNavBar a.link:hover {
    color:#333;
    border-top:4px solid #6bbbff
}
#GlobalNavBar .avatar {
    width:40px;
    height:40px;
    border-radius:20px
}
#GlobalNavBar .barEnd {
    margin-left:auto;
    margin-right:10px;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center
}
#GlobalMiniBar .bar {
    height:52px;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    background-color:#fff;
    border-bottom:1px solid #eee
}
#GlobalMiniBar .buttons {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    width:100%;
    height:100%
}
#GlobalMiniBar .buttons a {
    text-align:center;
    width:40px;
    padding:0 10px;
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s
}
#GlobalMiniBar .buttons a .icon {
    font-size:28px
}
#GlobalMiniBar .buttons a .label {
    font-size:12px;
    line-height:18px
}
#GlobalMiniBar .buttons a:active {
    background-color:rgba(0,0,0,.1)
}
#GlobalMiniBar .buttons a.selected .icon,#GlobalMiniBar .buttons a.selected .label {
    color:#6bbbff
}
#GlobalMiniBar .search-button {
    color:#fff;
    background-color:#6bbbff;
    width:40px;
    height:40px;
    border-radius:20px;
    display:inline-block;
    box-sizing:border-box;
    font-size:22px;
    line-height:40px
}
#GlobalMiniBar #addToHomeScreen {
    width:100vw;
    height:50px;
    position:absolute;
    background-color:#f8f8f8;
    top:-50px;
    left:0;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    padding:0 20px;
    justify-content:flex-end;
    box-sizing:border-box;
    border:1px solid #eee;
    border-left:none;
    border-right:none
}
#GlobalMiniBar #addToHomeScreen button {
    margin-left:10px;
    background-color:#6bbbff;
    border-radius:15px;
    height:30px;
    padding:5px 20px;
    border:none;
    color:#fff
}
nav.bottom-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:42px;
    background-color:#fff;
    border-top:1px solid #eee;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    box-shadow:0 -1px 10px 0 #eee
}
nav.bottom-bar .yoopu2-icon {
    font-size:22px
}
nav.bottom-bar>button {
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    outline:0;
    border:none;
    background-color:#fff;
    width:60px;
    height:42px
}
nav.bottom-bar>button:active {
    background-color:#f8f8f8;
    outline:0;
    border:none
}
nav.bottom-bar>button:last-of-type {
    margin-left:auto
}
nav.bottom-bar>button:first-of-type {
    margin-left:0
}
#SearchContainer {
    width:100%;
    padding:0 10px;
    position:fixed;
    z-index:1000;
    background:#fff;
    box-sizing:border-box;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    height:52px;
    min-height:52px;
    top:0;
    left:0
}
#SearchContainer .back {
    position:absolute;
    font-size:22px;
    padding:9px 10px;
    top:6px
}
#SearchContainer .back:active {
    background-color:rgba(0,0,0,.1)
}
#SearchContainer .queryInput {
    border:1px solid #ccc;
    height:40px;
    width:100%;
    font-size:16px;
    padding-left:40px;
    border-radius:3px;
    box-sizing:border-box
}
#SearchContainer .queryInput::-webkit-search-cancel-button {
    margin-right:10px;
    -webkit-appearance:searchfield-cancel-button
}
#SearchContainer .queryInput::-webkit-input-placeholder {
    color:#aaa
}
@media all and (display-mode:standalone) {
    #addToHomeScreen {
        display:none
    }
}@media screen and (max-width:768px) {
    #GlobalNavBar {
        display:none
    }
    #GlobalMiniBar {
        position:fixed;
        width:100vw;
        bottom:0;
        left:0;
        border-top:1px solid #eee;
        z-index:1
    }
    #GlobalMiniBar~.yp-loader {
        bottom:52px
    }
    nav.bottom-bar~.yp-loader {
        bottom:42px
    }
    body[main]:not([embed]) {
        padding-bottom:52px
    }
}@media screen and (min-width:769px) {
    #GlobalMiniBar,#SearchContainer {
        display:none
    }
}yp-user-avatar {
     display:inline-block;
     vertical-align:middle;
     position:relative;
     width:80px;
     height:80px;
     min-width:80px
 }
yp-user-avatar .avatar {
    border-radius:50%;
    border:2px solid #333;
    width:70px;
    height:70px;
    background-color:#f4f3ee
}
yp-user-avatar .hat {
    display:none
}
yp-user-avatar .badge {
    display:none
}
yp-user-avatar[gender]:not([size]) .hat {
    display:initial;
    left:-10px;
    top:-10px;
    position:absolute;
    width:80px;
    height:80px
}
yp-user-avatar[gender=m]:not([size]) .hat {
    left:-2px
}
yp-user-avatar[ladder] .badge {
    display:initial;
    background-color:#fff;
    right:4px;
    bottom:4px;
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid #333
}
yp-user-avatar[size=medium] {
    width:40px;
    height:40px;
    min-width:40px
}
yp-user-avatar[size=medium] .avatar {
    margin-left:0;
    border-width:1px;
    width:40px;
    height:40px
}
yp-user-avatar[size=medium] .badge {
    width:14px;
    height:14px;
    bottom:-3px;
    right:-3px
}
yp-user-avatar[size=small] {
    width:30px;
    height:30px;
    min-width:30px
}
yp-user-avatar[size=small] .avatar {
    margin-left:0;
    border-width:1px;
    width:30px;
    height:30px
}
yp-user-avatar[size=small] .badge {
    display:none
}
yp-user-avatar[size=xsmall] {
    width:21px;
    height:21px;
    min-width:21px
}
yp-user-avatar[size=xsmall] .avatar {
    margin-left:0;
    border-width:0;
    width:21px;
    height:21px
}
yp-user-avatar[size=xsmall] .badge {
    display:none
}
yp-select {
    display:block
}
yp-select .radio-container {
    display:block;
    position:relative;
    padding-left:30px;
    margin-bottom:12px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
yp-select yp-option {
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    font-size:1.1em;
    padding-left:10px
}
yp-select yp-option:active {
    background-color:#eee
}
yp-select yp-option input[type=radio] {
    display:none
}
yp-select yp-option label {
    padding:15px;
    -webkit-flex:1;
    flex:1
}
yp-select yp-option .checkmark {
    height:14px;
    width:14px;
    background-color:#fff;
    border:2px solid #333;
    border-radius:50%;
    position:relative
}
yp-select yp-option input[type=radio]:checked+.checkmark .checkmark-checked {
    position:absolute;
    top:4px;
    left:4px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#333
}
yp-select yp-option[disabled] label {
    color:#999
}
yp-select yp-option[disabled] .checkmark {
    background-color:#eee;
    border-color:#999
}
yp-select yp-option[disabled] input:checked~.checkmark .checkmark-checked {
    background-color:#999
}
yp-slider {
    min-width:50px;
    height:16px;
    display:inline-block;
    position:relative
}
yp-slider .bar {
    -webkit-tap-highlight-color:transparent;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:inline-block;
    cursor:pointer
}
yp-slider .barBg,yp-slider .barFg {
    border-radius:4px;
    position:absolute;
    background-color:#ccc;
    width:100%;
    height:4px;
    left:0;
    margin:6px 0
}
yp-slider .barFg {
    background-color:#333
}
yp-slider .thumb {
    -webkit-tap-highlight-color:transparent;
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:12px;
    position:absolute;
    left:-6px;
    top:2px;
    cursor:pointer;
    background-color:#333
}
yp-slider .thumb:after {
    content:"";
    position:absolute;
    width:29px;
    height:29px;
    background-color:transparent;
    left:-7px;
    top:-7px
}
yp-slider[disabled] .thumb {
    background-color:#ccc
}
yp-slider[disabled] .barFg {
    background-color:#aaa
}
.sheetContainer {
    -webkit-text-size-adjust:none;
    position:relative;
    box-sizing:border-box;
    min-height:100vh;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column
}
.sheetContainer yp-slider-play {
    position:fixed;
    right:10px;
    bottom:70px;
    z-index:1
}
.bottom-bar,.control {
    transition:box-shadow .2s
}
body.metronome-beat .bottom-bar,body.metronome-beat .control {
    box-shadow:0 -10px 10px 0 rgba(205,92,92,.2)
}
.bottom-bar #sheet-view-time-display {
    position:absolute;
    top:-20px;
    right:0;
    background-color:#fff;
    font-size:10px;
    padding:4px 10px 2px 10px;
    box-shadow:-5px -5px 10px 0 #eee;
    border-radius:10px 0 0 0
}
.bottom-bar input[type=checkbox] {
    display:none
}
.bottom-bar label.enabled {
    font-weight:700;
    font-size:1.2em!important;
    font-family:initial;
    width:100%
}
.bottom-bar .control {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    position:absolute;
    height:42px;
    top:100px;
    left:0;
    right:0;
    background-color:#fff;
    box-sizing:border-box;
    border-top:1px solid #eee;
    border-bottom:1px solid #f8f8f8
}
.bottom-bar .control yp-slider {
    width:100%;
    margin:0 10px
}
.bottom-bar .control sub {
    font-size:13px;
    color:#333
}
.bottom-bar .control sub:first-of-type {
    margin-left:10px
}
.bottom-bar .control sub:last-of-type {
    margin-right:10px
}
.bottom-bar #scroll-button+label.enabled {
    color:#9acd32
}
.bottom-bar .scroll-control yp-slider .barFg,.bottom-bar .scroll-control yp-slider .thumb {
    background-color:#9acd32
}
.bottom-bar #metronome-button+label.enabled,.bottom-bar input[type=checkbox]:checked+label {
    color:#6bbbff
}
.bottom-bar .metronome-control yp-slider .barFg,.bottom-bar .metronome-control yp-slider .thumb {
    background-color:#6bbbff
}
.bottom-bar .audio-control audio {
    height:40px;
    width:100%
}
.bottom-bar .audio-control audio:focus {
    outline:0
}
.bottom-bar .audio-control audio::-webkit-media-controls-panel {
    background-color:#fff
}
.bottom-bar input[type=checkbox]:checked~.control {
    top:-42px
}
#more-actions-dialog yp-user-avatar {
    margin-right:20px
}
#more-actions-dialog .user-button {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-flex:1;
    flex:1
}
#more-actions-dialog .message-button {
    display:inline-block;
    padding:2px 10px;
    border:1px solid #6bbbff;
    color:#6bbbff;
    border-radius:3px;
    margin-left:auto;
    font-weight:400;
    font-size:.9em
}
footer {
    font-size:.9em;
    color:#aaa;
    border-top:1px solid #f8f8f8;
    padding:10px 5px 54px;
    margin:0 10px
}
footer a {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    font-size:1.2em;
    color:#999
}
footer a img {
    width:30px;
    height:30px;
    border-radius:15px;
    margin-right:10px
}
footer a .author {
    overflow-x:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    max-width:50%;
    white-space:nowrap
}
footer a .stats {
    flex:1;
    text-align:right
}
footer a .stats i.yoopu2-icon {
    margin-right:3px
}
footer a .stats i.yoopu2-icon+span {
    margin-right:10px
}
footer .about {
    margin-top:5px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow-x:hidden;
    width:100%
}
[current-view=view-settings] {
    padding-top:20px;
    z-index:1;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#f4f3ee;
    text-align:left
}
[current-view=view-settings] nav {
    background-color:#fff
}
[current-view=view-settings] h3 {
    font-size:14px;
    color:#999;
    margin:20px 0 2px 16px;
    font-weight:400
}
[current-view=view-settings] a {
    color:#000;
    font-weight:700;
    text-decoration:underline
}
[current-view=view-settings] a:hover {
    color:#6bbbff
}
[current-view=view-settings] section {
    border:solid #f4f3ee;
    border-width:.5px 0 .5px 0;
    margin-bottom:30px;
    padding-left:16px;
    line-height:30px;
    font-size:16px;
    background-color:#fff
}
[current-view=view-settings] section .row {
    position:relative;
    border-bottom:.5px solid #f4f3ee
}
[current-view=view-settings] section .row:last-child {
    border-bottom-width:0
}
[current-view=view-settings] section .labelIcon {
    position:absolute;
    left:5px;
    top:10px;
    display:inline-block;
    width:30px;
    height:30px;
    color:#4d92df;
    font-size:30px
}
[current-view=view-settings] section .item {
    width:-webkit-calc(100% - 16px);
    width:-moz-calc(100% - 16px);
    width:calc(100% - 16px);
    padding:10px 0;
    position:relative
}
[current-view=view-settings] section .switch {
    position:absolute;
    right:0
}
[current-view=view-settings] section.for-editor button {
    font-size:16px;
    padding:10px 0;
    width:100%;
    color:#666;
    background-color:#fff;
    border:none;
    text-align:left
}
[current-view=view-settings] .toggle {
    display:inline-block;
    position:absolute;
    right:0
}
[current-view=view-settings] .toggle input[type=radio] {
    display:none
}
[current-view=view-settings] .toggle input[type=radio]:checked+label,[current-view=view-settings] .toggle label:hover {
    background-color:#6bbbff;
    color:#fff
}
[current-view=view-settings] .toggle label {
    display:inline-block;
    padding:0 20px;
    -webkit-transition:all .1s;
    -moz-transition:all .1s;
    -o-transition:all .1s;
    transition:all .1s;
    cursor:pointer;
    color:#6bbbff;
    border:1px solid #6bbbff;
    border-right-width:0;
    background-color:#fff;
    text-align:center;
    font-size:14px;
    line-height:28px
}
[current-view=view-settings] .toggle label:first-of-type {
    border-radius:2px 0 0 2px
}
[current-view=view-settings] .toggle label:last-of-type {
    border-right-width:1px;
    border-radius:0 2px 2px 0
}
body:not(.published) .unpublishButton {
    display:none
}
body.autoScrollDisabled yp-slider-play {
    display:none
}
#GlobalNavBar {
    background-color:#fff;
    height:52px;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    max-width:1200px;
    min-width:800px;
    z-index:1;
    margin:0 auto
}
#GlobalNavBar .logo {
    background:url(//cdn.yoopu.me/img/logo.f8589ac9.png) center;
    background-size:40px;
    height:40px;
    display:inline-block;
    margin:7px 20px 7px 10px;
    width:40px
}
#GlobalNavBar .searchContainer {
    display:inline-block;
    position:relative;
    margin-left:20px
}
#GlobalNavBar input {
    height:36px;
    padding:5px 15px;
    font-size:.9em;
    width:120px;
    box-sizing:border-box;
    border-radius:18px;
    background-color:#f4f3ee;
    border:none;
    outline:0;
    transition:all,.3s
}
#GlobalNavBar input[type=search]::-webkit-search-cancel-button {
    display:none
}
#GlobalNavBar input:focus {
    width:200px
}
#GlobalNavBar .searchContainer a {
    position:absolute;
    right:10px;
    top:0;
    line-height:36px;
    width:36px;
    text-align:right;
    color:#999
}
#GlobalNavBar a.link {
    color:#999;
    font-size:16px;
    transition:all,.3s;
    line-height:48px;
    padding:0 15px;
    border-top:4px solid #fff
}
#GlobalNavBar a.link.selected,#GlobalNavBar a.link:hover {
    color:#333;
    border-top:4px solid #6bbbff
}
#GlobalNavBar .avatar {
    width:40px;
    height:40px;
    border-radius:20px
}
#GlobalNavBar .barEnd {
    margin-left:auto;
    margin-right:10px;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center
}
#GlobalMiniBar .bar {
    height:52px;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    background-color:#fff;
    border-bottom:1px solid #eee
}
#GlobalMiniBar .buttons {
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    width:100%;
    height:100%
}
#GlobalMiniBar .buttons a {
    text-align:center;
    width:40px;
    padding:0 10px;
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s
}
#GlobalMiniBar .buttons a .icon {
    font-size:28px
}
#GlobalMiniBar .buttons a .label {
    font-size:12px;
    line-height:18px
}
#GlobalMiniBar .buttons a:active {
    background-color:rgba(0,0,0,.1)
}
#GlobalMiniBar .buttons a.selected .icon,#GlobalMiniBar .buttons a.selected .label {
    color:#6bbbff
}
#GlobalMiniBar .search-button {
    color:#fff;
    background-color:#6bbbff;
    width:40px;
    height:40px;
    border-radius:20px;
    display:inline-block;
    box-sizing:border-box;
    font-size:22px;
    line-height:40px
}
#GlobalMiniBar #addToHomeScreen {
    width:100vw;
    height:50px;
    position:absolute;
    background-color:#f8f8f8;
    top:-50px;
    left:0;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    padding:0 20px;
    justify-content:flex-end;
    box-sizing:border-box;
    border:1px solid #eee;
    border-left:none;
    border-right:none
}
#GlobalMiniBar #addToHomeScreen button {
    margin-left:10px;
    background-color:#6bbbff;
    border-radius:15px;
    height:30px;
    padding:5px 20px;
    border:none;
    color:#fff
}
nav.bottom-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:42px;
    background-color:#fff;
    border-top:1px solid #eee;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    box-shadow:0 -1px 10px 0 #eee
}
nav.bottom-bar .yoopu2-icon {
    font-size:22px
}
nav.bottom-bar>button {
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    outline:0;
    border:none;
    background-color:#fff;
    width:60px;
    height:42px
}
nav.bottom-bar>button:active {
    background-color:#f8f8f8;
    outline:0;
    border:none
}
nav.bottom-bar>button:last-of-type {
    margin-left:auto
}
nav.bottom-bar>button:first-of-type {
    margin-left:0
}
#SearchContainer {
    width:100%;
    padding:0 10px;
    position:fixed;
    z-index:1000;
    background:#fff;
    box-sizing:border-box;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    height:52px;
    min-height:52px;
    top:0;
    left:0
}
#SearchContainer .back {
    position:absolute;
    font-size:22px;
    padding:9px 10px;
    top:6px
}
#SearchContainer .back:active {
    background-color:rgba(0,0,0,.1)
}
#SearchContainer .queryInput {
    border:1px solid #ccc;
    height:40px;
    width:100%;
    font-size:16px;
    padding-left:40px;
    border-radius:3px;
    box-sizing:border-box
}
#SearchContainer .queryInput::-webkit-search-cancel-button {
    margin-right:10px;
    -webkit-appearance:searchfield-cancel-button
}
#SearchContainer .queryInput::-webkit-input-placeholder {
    color:#aaa
}
@media all and (display-mode:standalone) {
    #addToHomeScreen {
        display:none
    }
}@media screen and (max-width:768px) {
    #GlobalNavBar {
        display:none
    }
    #GlobalMiniBar {
        position:fixed;
        width:100vw;
        bottom:0;
        left:0;
        border-top:1px solid #eee;
        z-index:1
    }
    #GlobalMiniBar~.yp-loader {
        bottom:52px
    }
    nav.bottom-bar~.yp-loader {
        bottom:42px
    }
    body[main]:not([embed]) {
        padding-bottom:52px
    }
}@media screen and (min-width:769px) {
    #GlobalMiniBar,#SearchContainer {
        display:none
    }
}@media print {
    .no-print {
        display:none!important
    }
}#nav-container .actionPanel {
     position:fixed;
     top:0;
     right:40px;
     z-index:10
 }
#nav-container .actionPanel i {
    font-size:22px;
    line-height:52px;
    padding:0 10px
}
#nav-container .actionPanel i:active {
    background-color:rgba(0,0,0,.1)
}
[current-view=view-settings] .headline {
    background-color:#fff;
    display:block;
    font-size:16px;
    padding:8px 16px 4px 16px;
    letter-spacing:2px;
    border-bottom:2px solid #6bbbff;
    font-weight:700;
    color:#666;
    text-align:center
}
.removeFromFavoriteButton {
    display:none
}
body.favorite .removeFromFavoriteButton {
    display:inline-block
}
body.favorite .addToFavoriteButton {
    display:none
}
#remove-fav-button {
    display:none;
    color:#6bbbff
}
body.favorite #remove-fav-button {
    display:inline-block
}
body.favorite #add-fav-button {
    display:none
}
body.owned #add-fav-button {
    display:none
}
